<template>
  <div class="app-container">
    <div class="filter-container" align="left">
      <el-tabs type="border-card">
        <el-tab-pane>
          <span slot="label" @click="selectAll_" class="t-span">全部审核</span>
          <AllComp :data="deliverList" @clickHandler="changeStatus"></AllComp>
        </el-tab-pane>
        <el-tab-pane>
          <span slot="label" @click="status = 0" class="t-span">待审核</span>
          <AllComp :data="deliverList" @clickHandler="changeStatus"></AllComp>
        </el-tab-pane>
        <el-tab-pane>
          <span slot="label" @click="status = 1" class="t-span">审核成功</span>
          <AllComp :data="deliverList"></AllComp>
        </el-tab-pane>
        <el-tab-pane>
          <span slot="label" @click="status = 2" class="t-span">审核失败</span>
          <AllComp :data="deliverList"></AllComp>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="paging" style="float: right;">
      <el-pagination :page-size="10" background layout="prev, pager, next" :total="10">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import AllComp from './comp/delivertable.vue';
import { selectAll, selectByStatus, examine } from '../../api/auditsmanage/deliver.js'
export default {
  components: {
    AllComp
  },
  data() {
    return {
      deliverList: [
        {
          examinedeliverId: 1,
          deliverName: '张三',
          petName: '茵茵',
          petbreedName: '萨摩耶',
          petAge: '3岁',
          petDescr: '宠物描述宠物描述宠物描述宠物描述',
          petTypeName: '狗',
          petVaccine: "1",
          examinedeliverTime: "2023-08-03",
          examinedeliverStatus: 0,
        },
        {
          examinedeliverId: 1,
          deliverName: '张三',
          petName: '茵茵',
          petbreedName: '萨摩耶',
          petAge: '3岁',
          petDescr: '宠物描述宠物描述宠物描述宠物描述',
          petTypeName: '狗',
          petVaccine: "1",
          examinedeliverTime: "2023-08-03",
          examinedeliverStatus: 0,
        },
      ],
      updateId: null,
      status: null,
    }
  },
  methods: {
    // 查询所有
    async selectAll_() {
      let res = await selectAll();
      console.log(res)
      this.deliverList = res.data
    },
    // 修改状态
    async changeStatus(id, petId, status) {
      let res = await examine(id, petId, status);
      console.log(res)
      this.selectAll_()
    },

  },
  watch: {
    async status() {
      let res = await selectByStatus(this.status);
      this.deliverList = res.data
    }
  },
  created() {
    this.selectAll_()
  },
}
</script>
<style>
.t-span {
  padding: 10px 15px
}
</style>